<template>
    <div style="max-width: 1200px;height: 50%;min-height:200px; display: flex;justify-content: center;align-items: center;margin: 100px auto;">


        <div>

        </div>

        <div v-html="content">

        </div>
    </div>


</template>

<script setup>
// import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
import {computed, onMounted, ref, watch} from "vue";



const content = ref(" content: '<h2>I am Example</h2>'")
const myQuillEditor = ref(null)
// const delta = ref.myQuillEditor .getContents();

onMounted(()=>{

    // console.log('myQuillEditor.value',myQuillEditor.value)
})

watch(myQuillEditor,(newValue,oldValue) => {
    console.log(newValue);
},{deep:true});




const editorOption = ref({
    modules: {
        ImageExtend: {  // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入
            name: 'file',  // 图片参数名
            size: 3,  // 可选参数 图片大小，单位为M，1M = 1024kb
            action: 'http://localhost:8941/userInformation/uploadImage',  // 服务器地址, 如果action为空，则采用base64插入图片
            // response 为一个函数用来获取服务器返回的具体图片地址
            // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
            // 则 return res.data.url
            response: (res) => {

                return res.msg;
            },
            // headers: (xhr) => {
            //     xhr.setRequestHeader( 'Content-Type','multipart/form-data')
            // },  // 可选参数 设置请求头部
            sizeError: () => {},  // 图片超过大小的回调
            start: () => {},  // 可选参数 自定义开始上传触发事件
            end: () => {},  // 可选参数 自定义上传结束触发的事件，无论成功或者失败
            error: () => {},  // 可选参数 上传失败触发的事件
            success: () => {},  // 可选参数  上传成功触发的事件
            change: (xhr, formData) => {
                // xhr.setRequestHeader('myHeader','myValue')
                // formData.append('token', 'myToken')
            } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
        },
        toolbar: {  // 如果不上传图片到服务器，此处不必配置
            container: '',  // container为工具栏，此次引入了全部工具栏，也可自行配置
            handlers: {
                'image': function () {  // 劫持原来的图片点击按钮事件
                    // QuillWatch.emit(this.quill.id)
                }
            }
        }
    }
})
onMounted(()=>{
    //初始化内容

})



const editor = computed(()=>{
    return this.$refs.myQuillEditor.quill;
})

//失去焦点
const onEditorBlur = (quill)=>{
    let delta = quill.getContents();

    //delta.ops  文本全部内容
    content.value = (delta.ops+"");
};
//获得焦点
const onEditorFocus=(quill)=> {

};

//文本编辑器更新初始化
const onEditorReady=(quill)=> {
    // 初始化内容  quill.setContents();
};
const onEditorChange=({ quill, html, text })=> {
    console.log('editor change!', quill, html, text)
    this.content = html
};

</script>

<style scoped>

</style>